Jassif Team Institution

<template>
  <h1>v-on Example</h1>
  <p>When the '.capture' modifier is used on the parent DIV element, the event is captured first in the parent element when the child element is clicked.</p>
  <p>If the '.capture' modifier is removed from this code, the child element will capture the click event first. This is the default behavior, that the event bubbles up, first in child element, then to the parent.</p>
  <div v-on:click.capture="this.msg.push('parent')" id="parent">
    <p>This is the parent element.</p>
    <div v-on:click="this.msg.push('child')">
      <p>This is the child element. CLICK HERE!</p>
    </div>
  </div>
  <p>The order of when and where the event is captured.</p>
  <ol>
    <li v-for="x in msg">{{ x }}</li>
  </ol>
</template>

<script>
export default {
  data() {
    return {
      msg: []
    };
  }
}
</script>

<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
}
#parent {
  width: 250px;
  background-color: lightpink;
}
#parent > div {
  cursor: pointer;
  background-color: lightgreen;
}
</style>

<template>
  <h1>v-on Example</h1>
  <p>The '.stop' modifier stops the click event from propagating any further.</p>
  <p>If the '.stop' modifier is removed from this code, the parent element will also capture the click event on the child element.</p>
  <div v-on:click="this.msg.push('parent')" id="parent">
    <p>This is the parent element.</p>
    <div v-on:click.stop="this.msg.push('child')">
      <p>This is the child element. CLICK HERE!</p>
    </div>
  </div>
  <p>The order of when and where the event is captured.</p>
  <ol>
    <li v-for="x in msg">{{ x }}</li>
  </ol>
</template>

<script>
export default {
  data() {
    return {
      msg: []
    };
  }
}
</script>

<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
}
#parent {
  width: 250px;
  background-color: lightpink;
}
#parent > div {
  cursor: pointer;
  background-color: lightgreen;
}
</style>

<template>
  <h1>v-on Example</h1>
  <p>The '.once' modifier prevents the event from happening more than once.</p>
  <button v-on:click.once="clickTimes++">Click</button>
  <p>Click event happened {{ clickTimes }} times.</p>
</template>

<script>
export default {
  data() {
    return {
      clickTimes: 0
    };
  }
}
</script>

<template>
  <h1>v-on Example</h1>
  <p>Hold 'Shift' key and press left mouse button on the image:</p>
  <img v-on:click.left.shift="changeImg" v-bind:src="imgUrl">
</template>

<script>
export default {
  data() {
    return {
      imgFish: true,
      imgUrl: 'img_fish.svg'
    }
  },
  methods: {
    changeImg() {
      this.imgFish = !this.imgFish;
      if (this.imgFish) {
        this.imgUrl = 'img_fish.svg'
      }
      else {
        this.imgUrl = 'img_tiger.svg'
      }
    }
  }
}
</script>

<style scoped>
img {
  width: 200px;
}
</style>